<template>
	<view style="width: 100vw;position: absolute;background-color: #f0f0f0;padding: 0 10rpx;min-height: 100vh;">
		
		<!-- <view @click="goDetail(item)" class="list-item" v-for="item in list" :key="item.id" v-if="list.length >0">
			<view>
				访客姓名：{{item.name}}
			</view>
			<view>
				访客电话：{{item.mobile}}
			</view>
			<view class="">
			访问时间：{{$funcs.toLocalDate(item.startTime)+'至'+$funcs.toLocalDate(item.expiredTime)}}
			</view>
			<view>
				审批结果：
				<text :style="{color: approveType[item.approved]}">{{ item.approved ? '已通过': '未通过' }}</text>
			</view>
			<view class="arrow"></view>
		</view> -->
		<view class="record-item" @click="goDetail(item)" v-for="item in list" :key="item.id" >
			<view class="item-title">
				<view class="left-border"></view>
				<view class="left">审批结果：</view>
				<view class="complete" v-if="item.approved">已通过</view>
				<view v-else class="right">未通过</view>
			</view>
			<view class="item-content">
				<view class="content-top un-evaluate">
					<view>访客姓名 ：{{item.name}}</view>					
				</view>
				<view class="content-center">访客电话 ：{{item.mobile}}</view>
				<view class="content-bottom">访问时间 ：{{$funcs.toLocalDate(item.startTime)+'至'+$funcs.toLocalDate(item.expiredTime)}}</view>
				<!-- <view class="content-bottom">审批结果：无</view> -->
			</view>
		</view>
		<view v-if="!list.length && isLoad"  style="height: 100vh;background-color: #fff;">
			<van-empty description="暂无记录"></van-empty>
		</view>
		
		<!-- <view class="list-item"  v-if="list.length==0">
			<view class="" style="text-align: center;">
				暂无数据
			</view>
		</view> -->
	
		<!-- <view @click="getList()">加载更多。。。</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				approveType: {
					true: '#43CC46',
					false: '#fb2d2d'
				},
				params: {
					projId: uni.getStorageSync('projId'),
					residentId: uni.getStorageSync('userInfo').id,
					delFlag:0,
					pagination: {
						"pageSize": 10,
						"current": 1
					},
					sorter: {
						"field": "id",
						"order": 0
					}
				},
				list: [],
				isLoad: false
			}
		},
		onReady() {
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '../visitDetail/visitDetail?item=' + JSON.stringify(item)
				})
			},
			getList() {
				uni.showLoading()
				this.$http.post('external/face/user/list', this.params).then(res => {
					if (res.code === 10000) {
						this.list = this.list.concat(res.data.list || [])
						this.isLoad = true
						console.log(this.list)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../style/ticket.scss';
.list-item{
	background-color: white;
	margin-bottom: 10rpx;
	padding: 10rpx;
	border-right: 4rpx;
	font-size: 28rpx;
	line-height: 42rpx;
	.arrow {
		position: absolute;
		top: 80rpx;
		right: 40rpx;
		width: 20rpx;
		height: 20rpx;
		border-top: 2rpx solid #333;
		border-right: 2rpx solid #333;
		transform: rotate(45deg);
	}
}
</style>
